﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-index.css">
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        .showButton {
            width: 80px;
            line-height: 24px;
            font-size: 14px;
            border: 1px solid #999999;
            margin: 5px auto;
            border-radius: 2px;
        }

        .showButton:hover {
            color: #409eff;
            border: 1px solid #409eff;
            cursor: pointer
        }

        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        /*    .logo-list li {
              padding: 8px;
            }

            .logo-list li:hover {
              background-color: #f3f3f3;
            }*/

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }

        am {
            color: red;
        }

        .command em {
            height: 14px;
            line-height: 14px;
            padding: 0 3px;
            border: 1px solid #e23a3a;
            margin-right: 3px;
            overflow: hidden;
            text-align: center;
            font-style: normal;
            font-size: 12px;
            font-family: "Helvetica Neue", "Hiragino Sans GB", SimSun, serif;
            font-weight: bold;
            border-radius: 2px;
            color: #e23a3a;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main">
        <div class="py-container">
            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li><a href="#">手机</a></li>
                    <li><span>手机通讯</span></li>
                </ul>
                <!--已选择过滤项-->
                <ul class="tags-choose">
                    <li class="tag">
                        品牌:<span style="color: red">apple</span>
                        <i class="sui-icon icon-tb-close"></i>
                    </li>
                    <li class="tag">
                        内存:<span style="color: red">4G</span>
                        <i class="sui-icon icon-tb-close"></i>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <div class="type-wrap" v-for="options,key in filterList" v-if="key!=='品牌'">
                    <div class="fl key" v-text="key">分类</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li v-for="option in options">
                                <a v-text="option.name|| option">手机</a>
                            </li>

                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">品牌</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li v-for="option in options" v-if="option.image">
                                <img :src="option.image"/>
                            </li>
                            <li style="text-align: center" v-else>
                                <a style="line-height: 30px; font-size: 12px" href="#" v-text="option.name">黑马</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>
                <div class="type-wrap" style="text-align: center" v-show="Object.keys(remainFilterList).length > 5">
                    <div class="showButton" v-show="!showMore" @click="showMore=true">
                        更多 <i style="font-size: 16px;" class="el-icon-arrow-down"></i>
                    </div>
                    <div class="showButton" v-show="showMore" @click="showMore=false">
                        收起 <i style="font-size: 16px;" class="el-icon-arrow-up"></i>
                    </div>
                </div>

                <div class="type-wrap" style="text-align: center" v-show="Object.keys(remainFilterList).length > 5">
                    <div class="showButton" v-show="!showMore" @click="showMore=true">
                        更多 <i style="font-size: 16px;" class="el-icon-arrow-down"></i>
                    </div>
                    <div class="showButton" v-show="showMore" @click="showMore=false">
                        收起 <i style="font-size: 16px;" class="el-icon-arrow-up"></i>
                    </div>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <!--排序及顶部分页-->
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li :class="{active: sortIndex===i}" v-for="(s,i) in sortList" :key="i">
                                <a href="#" @click="selectSortField(i)">{{s.text}}
                                    <i :class="s.defaultDesc || params.desc ? 'el-icon-caret-bottom': 'el-icon-caret-top'"></i>
                                </a>

                            </li>
                        </ul>
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                            <span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
                            <a class="btn-arrow" href="#" @click.prevent="prePage"
                               style="display: inline-block">&lt;</a>
                            <a class="btn-arrow" href="#" @click.prevent="nextPage"
                               style="display: inline-block">&gt;</a>
                        </div>
                    </div>
                </div>
                <!--商品列表-->
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="g in goodsList" :key="g.id" style="margin-bottom: 10px">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <a :href="'/item/'+g.id+'.html'" target="_blank"><img :src="g.image" height="200"/></a>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>{{ly.formatPrice(price(g.prices))}}</i>
                                    </strong>
                                </div>
                                <div class="attr" style="overflow: hidden">
                                    <em v-html="g.title"></em>
                                </div>
                                <div class="cu">
                                    <em><span>促</span>满一件可参加超值换购</em>
                                </div>
                                <div class="commit">
                  <span class="command" style="line-height: 12px;font-size: 12px;">
                    本月累计售出 <em>{{g.sold}}</em>件
                  </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>


                <!--底部分页-->
                <div class="fr">
                    <div class="sui-pagination pagination-large">
                        <ul style="width: 550px">
                            <li :class="{prev:true,disabled:params.page === 1}">
                                <a href="#" @click.prevent="prePage">«上一页</a>
                            </li>
                            <li :class="{active: index(i) === params.page}" v-for="i in Math.min(5,totalPage)" :key="i">
                                <a href="#" @click.prevent="params.page=index(i)">{{index(i)}}</a>
                            </li>
                            <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
                            <li :class="{next:true,disabled:params.page === totalPage}">
                                <a href="#" @click.prevent="nextPage">下一页»</a>
                            </li>
                        </ul>
                        <div>
                            <span>共{{totalPage}}页&nbsp;</span>
                            <span>
            到第
            <input type="text" class="page-num" :value="toPageNum">
            页 <button class="page-confirm" @onclick="toPage">确定</button>
        </span>
                        </div>
                    </div>
                </div>





            </div>
            <!--热卖商品-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <foot></foot>
    <side-panel></side-panel>
</div>
<!--页面顶部，由js动态加载-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/pages/shortcut.js"></script>
<script src="./js/pages/top.js"></script>
<script src="./js/pages/copyright.js"></script>
<script src="./js/pages/foot.js"></script>
<script src="./js/pages/side-panel.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            params: {
                key: "",// 搜索关键字
                page: 0,// 当前页码
                sortBy: '', // 排序字段
                desc: true,// 是否降序
                filters: {} // 过滤项
            },
            total: 0,// 总条数
            totalPage: 0, // 总页数
            goodsList: [], // 商品列表
            toPageNum: 1,// 要跳到第几页
            filterList: {}, // 过滤项
            showMore: false, // 是否显示更多
            sortList: [ // 排序项列表
                {text: "综合", field: "", defaultDesc: true},
                {text: "销量", field: "sold", defaultDesc: true},
                {text: "新品", field: "updateTime", defaultDesc: true},
                {text: "价格", field: "prices", defaultDesc: false}
            ],
            sortIndex: 0, // 选中的排序项索引
        },
        created() {
            // 获取请求参数
            let key = ly.getUrlParam("key");
            if (!key) return;
            // 获取其它参数
            let params = ly.parse(location.hash.substring(1));
            // 初始化其它请求参数
            params.page = params.page ? parseInt(params.page) : 1;
            params.key = key;
            params.filters = params.filters || {};
            params.sortBy = "";
            params.desc = true;
            this.params = params;
        },
        watch: {
            "params.key"(val, oldVal) {
                if (!oldVal) {
                    return;
                }
                // 搜索
                this.searchData();
                // 过滤项
                this.getFilters();
            },
            "params.page"(val, oldVal) {
                if (!oldVal) {
                    return;
                }
                let {key, ...obj} = this.params;
                location.hash = "#" + ly.stringify(obj);
                // 搜索
                this.searchData();
            },
            "params.filters"() {
                // 获取请求参数
                let {key, ...obj} = this.params;
                // 保存到路径hash中
                location.hash = "#" + ly.stringify(obj);
                // 如果当前不是第一页，则重置页面到第一页
                if (this.params.page !== 1) {
                    this.params.page = 1;
                } else { // 如果是第一页，则查询数据和新的过滤项列表
                    // 数据查询
                    this.searchData();
                    // 过滤项查询
                    this.getFilters();
                }
            }
        },
        methods: {
            searchData() {
                axios.post("/search/goods/list", this.params)
                    .then(resp => {
                        // 分页数据
                        this.total = resp.data.total;
                        // 计算总页数
                        this.totalPage = Math.floor((this.total + 19) / 20);
                        // 商品
                        this.goodsList = resp.data.content;
                    })
                    .catch(e => console.log(e))
            },
            getFilters() {
                axios.post("/search/goods/filter", this.params)
                    .then(resp => {
                        this.filterList = resp.data;
                    })
                    .catch(e => console.log(e))
            },
            nextPage() {
                if (this.params.page < this.totalPage) this.params.page++;
            },
            prePage() {
                if (this.params.page > 1) this.params.page--;
            },
            index(i) {
                if (this.params.page <= 3 || this.totalPage <= 5) {
                    // 当前页小于3，则页码就是从 i 开始
                    return i;
                } else if (this.params.page <= this.totalPage - 2) {
                    // 大于3，则从page-2开始，然后逐个加1
                    return this.params.page - 3 + i;
                } else {
                    return this.totalPage - 5 + i;
                }
            },
            toPage() {
                this.params.page = Math.max(Math.min(100, this.totalPage, this.toPageNum), 1);
            },
            price(arr) {
                return this.params.desc ? Math.max.apply(null, arr) : Math.min.apply(null, arr);
            },
            selectFilter(k, v) {
                // 拷贝原有属性
                const {...obj} = this.params.filters;
                // 添加新属性
                obj[k] = v;
                // 覆盖
                this.params.filters = obj;
            },
            selectSortField(i) {
                // 获取选中的项
                const s = this.sortList[i];
                // 判断如果重复点击price
                if (this.sortIndex === i && i === 3) {
                    // 排序方式取反
                    this.params.desc = !this.params.desc;
                } else {
                    this.params.desc = s.defaultDesc;
                }
                // 改变选中的项
                this.sortIndex = i;
                // 改变参数值
                this.params.sortBy = s.field;
                if (this.params.page !== 1) {
                    // 重置到第一页
                    this.params.page = 1;
                } else {
                    // 搜索数据
                    this.searchData();
                }
            },
            cancelFilter(k) {
                // 拷贝原有属性
                const {...obj} = this.params.filters;
                // 添加新属性
                delete obj[k];
                // 覆盖
                this.params.filters = obj;
            },
            showFilterValue(k, v) {
                if (k !== "分类" && k !== "品牌") {
                    return v;
                }
                return this.filterList[k][0].name;
            }
        },
        computed: {
            remainFilterList() {
                // 获取已经选中的过滤项的key
                const keys = Object.keys(this.params.filters);
                // 定义空对象，记录符合条件的过滤项
                const obj = {};
                // 遍历全部过滤项
                Object.keys(this.filterList).forEach(key => {
                    // 过滤掉已经包含在已选中的过滤项中的，还有待选项不超过1个的
                    if (!keys.includes(key) && this.filterList[key].length > 1) {
                        obj[key] = this.filterList[key];
                    }
                });
                return obj;
            }
        }
    });
</script>

</body>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>